<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>员工管理</title>
    <% include("/common/common_css_js.html"){} %>
</head>
<body>
    <div style="padding-bottom: 5px;">
        <div id="queryForm" class="uc-toolbaroverflow" _borderStyle="border-top:0;">
            <span>员工信息：</span>
            <input id="keyName" name="keyName" class="mini-textbox" style="width:250px" emptyText="姓名、姓名拼音、首字母、电话号码" required="false" requiredErrorText="姓名不能为空"/>
            <span>归属部门：</span>
            <input id="keyDepartmentId" name="keyDepartmentId" class="mini-treeselect" style="width:250px;" textField="name" valueField="id" emptyText="请选择..."
                   virtualScroll="true"  required="false" allowInput="false" showNullItem="true" nullItemText="请选择..." requiredErrorText="没有选择部门"/>



            <span>在职状态:</span>
            <input id="keyWorkingStateId" name="keyWorkingStateId" class="mini-combobox" style="width: 100px;" textField="name" valueField="id" emptyText="请选择..."
                   required="false" allowInput="false" showNullItem="true" nullItemText="请选择..." />

            <span>锁定状态:</span>
            <input id="keyIsLockId" name="keyIsLockId" class="mini-combobox" style="width: 250px;" textField="name" valueField="id" emptyText="请选择..."
                   required="false" allowInput="false" showNullItem="true" nullItemText="请选择..." />

            <div style="margin-top: 5px"></div>
            <span>入职日期:</span>
            <input id="keyRegisterStartDate" name="keyRegisterStartDate" class="mini-datepicker" style="width:200px;" nullValue="null"
                   format="yyyy-MM-dd" showTime="true" showOkButton="true" showClearButton="false"
                   required="false" />
            ---
            <input id="keyRegisterEndDate" name="keyRegisterEndDate" class="mini-datepicker" style="width:200px;" nullValue="null"
                   format="yyyy-MM-dd" showTime="true" showOkButton="true" showClearButton="false"
                   required="false" />

            <div style="margin-top: 5px"></div>
            <a class="mini-button" iconCls="icon-search" onclick="search()">查询</a>
            <a class="mini-button" iconCls="icon-new" onclick="clearSearch()">清空查询条件</a>
            <span class="separator"></span>
            <a class="mini-button" iconCls="icon-add" onclick="showAddUser('add')">新增</a>
            <a class="mini-button" iconCls="icon-edit" onclick="showEditUser('edit')">编辑</a>
            <span class="separator"></span>
            <#download_grid id="downloadGrid" theGridId="datagrid1" theFileName="用户列表"/>
        </div>
    </div>

    <div class = "mini-fit">
        <div id="datagrid1" class="mini-datagrid"
             style="width: 100%; height: 100%;"
             url="${base}/pages/user_manage/query" idField="id"
             showPager="true" pageSize="20" sizeList="[10,20,30,50,100]"
             allowResize="true"
             allowCellWrap="true"
             multiSelect = "true"
             sortField="registerDate"
             sortOrder="asc">
            <div property="columns">
                <div type="checkcolumn" ></div>
                <div field="mobile" width="140" headerAlign="center" align="center" allowSort="true">电话(登录账号)</div>
                <div field="name" width="140" headerAlign="center" align="center" allowSort="true">姓名</div>
                <div field="fullPinyin" width="140" headerAlign="center" align="center" allowSort="true">全拼</div>
                <div field="camelCharPinyin" width="140" headerAlign="center" align="center" allowSort="true">首字母</div>
                <div field="genderId" width="140" headerAlign="center" align="center" allowSort="true" data-options='{cacheName:"sysDic"}' renderer="commonRender">性别</div>
                <div field="idCard" width="140" headerAlign="center" align="center">身份证号</div>
                <div field="departmentId" width="140" headerAlign="center" align="center" allowSort="true" data-options='{cacheName:"department"}' renderer="commonRender">归属部门</div>
                <div field="workingStateId" width="140" headerAlign="center" align="center" allowSort="true" data-options='{cacheName:"sysDic"}' renderer="commonRender">在职状态</div>
                <div field="isLockId" width="140" headerAlign="center" align="center" allowSort="true" data-options='{cacheName:"sysDic"}' renderer="commonRender">锁定状态</div>
                <div field="registerDate" width="140" headerAlign="center" align="center" allowSort="false" dateFormat="yyyy-MM-dd" renderer="ondayRenderer">入职日期</div>
                <div field="leaveDate" width="140" headerAlign="center" align="center" allowSort="false" dateFormat="yyyy-MM-dd" renderer="ondayRenderer">离职日期</div>
                <div field="address" width="140" headerAlign="center" align="center" allowSort="true">家庭地址</div>
                <div field="emailAddress" width="140" headerAlign="center" align="center" allowSort="true">电子邮箱</div>
                <div field="qq" width="140" headerAlign="center" align="center" allowSort="true">QQ号</div>
                <div field="wx" width="140" headerAlign="center" align="center" allowSort="true">微信号</div>
                <div field="comment" width="140" headerAlign="center" align="center" allowSort="true">备注</div>
            </div>
        </div>
    </div>

    <!--编辑窗口-->
    <div id="addOrUpdatePanel" class="mini-window" title="员工管理" style="width:800px;height:410px;"
         showMaxButton="true" showCollapseButton="false" showMinButton="true" showShadow="true"
         showToolbar="true" showFooter="true" showModal="true" allowResize="true" allowDrag="true">

        <div property="footer" style="padding:10px;text-align: right">
            <a  class="mini-button" iconCls="icon-ok" onclick="save()">保存</a>
            <a  class="mini-button" iconCls="icon-close" onclick="closePanel('addOrUpdatePanel')">关闭</a>
        </div>

        <div id="userForm">
            <input id="opFlag" name="opFlag" emptyText="操作标志"  class="mini-hidden" required="false" enabled="false" enabled="false" requiredErrorText="操作标志不能为空" />
            <input id="id" name="id" emptyText="id值"  class="mini-hidden" required="false" enabled="false" enabled="false" requiredErrorText="ID不能为空" />

            <span>电话(登录账号):</span>
            <input id="mobile" name="mobile" class="mini-textbox" style="width: 300px" emptyText="电话(登录账号)" required="true" requiredErrorText="电话(登录账号)不能为空"  onvaluechanged="mobileChange"/>
            <span id="mobileHint" style="color: red"></span>

            <div style="margin-top: 5px"></div>
            <div id="pwdArea">
                <span>登录密码:</span>
                <input id="password" name="password" class="mini-password" style="width: 200px" emptyText="登录密码" required="true" requiredErrorText="登录密码不能为空" onvaluechanged="passwordChange"/>

                <span>确认登录密码:</span>
                <input id="password1" name="password1" class="mini-password" style="width: 200px" emptyText="确认登录密码" required="true" requiredErrorText="确认登录密码不能为空" onvaluechanged="passwordChange"/>
                <div style="margin-top: 5px"></div>
                <span id="pwdHint" style="color: red"></span>
            </div>

            <div style="margin-top: 5px"></div>
            <span>姓名:</span>
            <input id="name" name="name" class="mini-textbox" style="width: 200px" emptyText="姓名" required="true" requiredErrorText="姓名不能为空" onvaluechanged="nameChange"/>

            <span>姓名全拼:</span>
            <input id="fullPinyin" name="fullPinyin" class="mini-textbox" style="width: 200px" emptyText="姓名全拼" required="false" requiredErrorText="姓名全拼不能为空"/>

            <span>姓名首字母:</span>
            <input id="camelCharPinyin" name="camelCharPinyin" class="mini-textbox" style="width: 200px" emptyText="姓名首字母" required="false" requiredErrorText="姓名首字母不能为空"/>

            <div style="margin-top: 5px"></div>
            <span>性别:</span>
            <input id="genderId" name="genderId" class="mini-combobox" style="width: 100px;" textField="name" valueField="id" emptyText="请选择..."
                   required="true" allowInput="false" showNullItem="true" nullItemText="请选择..." />

            <span>身份证号:</span>
            <input id="idCard" name="idCard" class="mini-textbox" style="width: 300px" emptyText="身份证号" required="false" requiredErrorText="身份证号不能为空"/>

            <div style="margin-top: 5px"></div>
            <span>归属部门:</span>
            <input id="departmentId" name="departmentId" class="mini-treeselect" style="width:250px;" textField="name" valueField="id" emptyText="请选择..."
                   virtualScroll="true"  required="false" allowInput="false" showNullItem="true" nullItemText="请选择..." requiredErrorText="没有选择部门"/>


            <span>在职状态:</span>
            <input id="workingStateId" name="workingStateId" class="mini-combobox" style="width: 100px;" textField="name" valueField="id" emptyText="请选择..."
                   required="true" allowInput="false" showNullItem="true" nullItemText="请选择..." />

            <span>锁定状态:</span>
            <input id="isLockId" name="isLockId" class="mini-combobox" style="width: 100px;" textField="name" valueField="id" emptyText="请选择..."
                   required="true" allowInput="false" showNullItem="true" nullItemText="请选择..." />

            <div style="margin-top: 5px"></div>
            <span>入职日期:</span>
            <input id="registerDate" name="registerDate" class="mini-datepicker" style="width:200px;" nullValue="null"
                   format="yyyy-MM-dd" showTime="true" showOkButton="true" showClearButton="false"
                   required="true" />

            <span>离职日期:</span>
            <input id="leaveDate" name="leaveDate" class="mini-datepicker" style="width:200px;" nullValue="null"
                   format="yyyy-MM-dd" showTime="true" showOkButton="true" showClearButton="false"
                   required="false" />

            <div style="margin-top: 5px"></div>
            <span>家庭地址:</span>
            <input id="address" name="address" class="mini-textbox" style="width: 300px" emptyText="家庭地址" required="false" requiredErrorText="家庭地址不能为空"/>
            <span>电子邮箱:</span>
            <input id="emailAddress" name="emailAddress" class="mini-textbox" style="width: 200px" vtype="email" emptyText="电子邮箱" required="false" requiredErrorText="电子邮箱不能为空"/>
            <div style="margin-top: 5px"></div>
            <span>QQ号:</span>
            <input id="qq" name="qq" class="mini-textbox" style="width: 200px" emptyText="QQ号" required="false" requiredErrorText="QQ号不能为空"/>
            <span>微信号:</span>
            <input id="wx" name="wx" class="mini-textbox" style="width: 200px" emptyText="微信号" required="false" requiredErrorText="微信号不能为空"/>
            <div style="margin-top: 5px"></div>
            <span>备注:</span>
            <textarea id="comment" name="comment" class="mini-textarea" style="width: 80%;height: 50px" emptyText="备注"  required="false"></textarea>
        </div>


    </div>


    <script type="text/javascript">
        mini.parse();

        let keyName = mini.get("keyName");
        let keyDepartmentId = mini.get("keyDepartmentId");
        let keyWorkingStateId = mini.get("keyWorkingStateId");
        let keyIsLockId = mini.get("keyIsLockId");
        let keyRegisterStartDate = mini.get("keyRegisterStartDate");
        let keyRegisterEndDate = mini.get("keyRegisterEndDate");

        let grid = mini.get("datagrid1");

        let addOrUpdatePanel = mini.get("addOrUpdatePanel");

        let userForm = new mini.Form("#userForm");

        let opFlag = mini.get("opFlag");
        let mobile = mini.get("mobile");
        let pwdArea = mini.get("pwdArea");
        let password = mini.get("password");
        let password1 = mini.get("password1");

        let name = mini.get("name");
        let fullPinyin = mini.get("fullPinyin");
        let camelCharPinyin = mini.get("camelCharPinyin");

        let genderId = mini.get("genderId");
        let idCard = mini.get("idCard");
        let departmentId = mini.get("departmentId");
        let workingStateId = mini.get("workingStateId");
        let isLockId = mini.get("isLockId");
        let registerDate = mini.get("registerDate");
        let leaveDate = mini.get("leaveDate");
        let address = mini.get("address");
        let email = mini.get("email");
        let qq = mini.get("qq");
        let wx = mini.get("wx");
        let comment = mini.get("comment");

        $(function () {

            // 部门列表
            let keyDepartmentIdJsonData = commonRenderDropList("department");
            keyDepartmentId.loadList(keyDepartmentIdJsonData, "id", "pid");
            departmentId.loadList(public_deepClone(keyDepartmentIdJsonData), "id", "pid");

            // 在职状态
            let keyWorkingStateJsonData = commonRenderSysDicDropListByKey("sysDic","XT_DIC_WORKING_STATUS");
            keyWorkingStateId.load(keyWorkingStateJsonData);
            workingStateId.load(public_deepClone(keyWorkingStateJsonData));

            let keyIsLockJsonData = commonRenderSysDicDropListByKey("sysDic","XT_DIC_YES_NO");
            keyIsLockId.load(keyIsLockJsonData);
            isLockId.load(public_deepClone(keyIsLockJsonData));

            let genderIdJsonData = commonRenderSysDicDropListByKey("sysDic","XT_DIC_GENDER");
            genderId.load(genderIdJsonData);

            // 加载列表数据
            grid.load();
        });

        function search() {
            let form = new mini.Form("#queryForm");
            let data = form.getData(true);
            grid.load(data);
        }

        function clearSearch() {
            let form = new mini.Form("#queryForm");
            form.clear();
        }

        function closePanel(panelId) {
            $("#pwdHint").hide();
            public_onCancel(panelId);
        }

        function showAddUser(opFlagValue){
            userForm.clear();

            opFlag.setValue(opFlagValue);

            workingStateId.select(1);
            isLockId.select(2)

            // 弹出添加窗口
            public_showModelAtPos("addOrUpdatePanel", "center", "middle");
        }

        function showEditUser(opFlagValue){

            let selectItems = grid.getSelecteds();
            if(selectItems.length == 0){
                showAlert("请选择要编辑的用户对象!");
                return;
            }
            if(selectItems.length>1){
                showAlert("请选择一个用户对象!");
                return;
            }

            let userObj = selectItems[0];
            userForm.clear();
            userForm.setData(userObj);

            password.setValue();
            password1.setValue();

            password.set({required:false});
            password1.set({required:false});

            opFlag.setValue(opFlagValue);

            $("#pwdHint").text("注:编辑用户时如果不设定密码则不会更改用户密码，如果设定则会以新密码为准");
            $("#pwdHint").show();

            // 弹出添加窗口
            public_showModelAtPos("addOrUpdatePanel", "center", "middle");
        }


        function mobileChange(e){
            $("#mobileHint").hide();
            let mobileValue = e.value;
            if(!public_isEmpty(mobileValue)){
                let ret = public_getServerData("${base}/pages/user_manage/queryXtUserPojoByMobile?mobile=" + mobileValue);
                if(ret.ok){
                    showAlert(ret.message,function (){
                        mobile.setValue();
                    });
                }
                else{
                    $("#mobileHint").text(ret.message);
                    $("#mobileHint").show();
                }

            }
        }

        function nameChange(e){
            let nameValue = e.value;
            fullPinyin.setValue(pinyin.getFullChars(nameValue));
            camelCharPinyin.setValue(pinyin.getCamelChars(nameValue));

        }

        function passwordChange(){
            let pwd = password.getValue();
            let pwd1 = password1.getValue();
            if(!public_isEmpty(pwd) && !public_isEmpty(pwd1)){
                if(pwd.length<5 || pwd1.length<5){
                    showAlert("密码长度小于5,太短,请重新设置!");
                    password.setValue();
                    password1.setValue();
                    return false;
                }
                if(pwd!=pwd1){
                    showAlert("两次输入的密码不一致，请重新输入!");
                    password.setValue();
                    password1.setValue();
                    return false;
                }
            }
            return true;
        }


        function save(){
            userForm.validate();
            if (userForm.isValid() == false) {
                return;
            }

            // 再次验证一下密码
            if(!passwordChange()){
                return;
            }

            let userData = userForm.getData(true);

            mini.confirm("确定保存用户信息？", "用户保存提示",
                function(action) {
                    if (action == "ok") {
                        let  msgBoxId = mini.loading("正在保存，请稍后...","用户保存提示");
                        let ret = public_getServerData("${base}/pages/user_manage/save?opFlag=" + userData.opFlag, userData);
                        mini.hideMessageBox(msgBoxId);
                        showAlert(ret.message,function (){
                            if(ret.ok){
                                // 重新刷新数据
                                grid.reload();
                                closePanel('addOrUpdatePanel');
                                // 刷新缓存
                                refreshCache();
                            }
                        });
                    }
                });

        }


        // 刷新缓存，把刷新的缓存放到父页面，应当调用父级页面方法刷新
        function refreshCache() {
            parent.window.loadCache();
        }

    </script>
</body>
</html>